<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <title>响应式</title>
    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon"/>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 100px;
        }

        body {
            font-size: 16px;
        }

        ul {
            list-style: none;
            width: 80%;
            margin: 0 auto;
        }

        li {
            width: 25%;
            float: left;
            padding: 10px;
            height: 3.5rem;
            text-align: center;
            font-size: .16rem;
        }

        li img {
            width: 100%;
        }

        li div {
            border: 1px solid #c8c8c8;
            padding: 5px;
            height: 100%;
        }

        li div p {
            margin-top: 10px;
        }

        li div a {
            text-decoration: none;
            color: #999999;
        }

        li div a:hover {
            color: blue;
        }

        /*不能使用rem和em*/
        /* w>=1024 */
        @media all and (min-width: 1024px) {
            ul li {
                width: 25%;
            }
        }

        /*w>=780 && w<1024*/
        @media all and (min-width: 780px) and (max-width: 1024px) {
            ul li {
                width: 33.333333%;
            }
        }

        /*w>=480 &&w<780*/
        @media all  and (min-width: 480px) and  (max-width: 780px) {
            ul li {
                width: 50%;
                height: 4rem;
            }
        }

        /*w<480 */
        @media all  and  (max-width: 480px) {
            ul li {
                width: 100%;
                height: 4rem;
            }
        }

    </style>
</head>
<body> 
<ul class="ul_list">
    <li>
        <div>
            <a href="#"><img src="../img/expo.png"/></a>
            <p><a href="#">优站精选</a></p>
            <p><a href="#">Bootstrap 网站实例</a></p>
            <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
        </div>
    </li>
    <li>
        <div>
            <a href="#"><img src="../img/webpack.png"/></a>
            <p><a href="#">Webpack</a></p>
            <p><a href="#">是前端资源模块化管理和打包工具</a></p>
            <p>
                Webpack 是当下最热门的前端资源模块化管理和打包工具。
                它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
            </p>
        </div>
    </li>
    <li>
        <div>
            <a href="#"><img src="../img/typescript.png"/></a>
            <p><a href="#">React</a></p>
            <p><a href="#">用于构建用户界面的 JavaScript 框架</a></p>
            <p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库</p>
        </div>
    </li>
    <li>
        <div>
            <a href="#"><img src="../img/typescript.png"/></a>
            <p><a href="#">TypeScript</a></p>
            <p><a href="#">中文手册</a></p>
            <p>
                TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，
                而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
            </p>
        </div>
    </li>
</ul>
</body>
</html>
